<!--
 * @Author: wangyuan
 * @Date: 2025-04-11 11:03:27
 * @LastEditors: wangyuan
 * @LastEditTime: 2025-04-11 11:12:27
 * @Description: 请填写简介
 * 仅限内部使用
-->
<template>
  <!-- <div ref="chartRef" style="width: 600px; height: 400px"></div> -->
  <div style="position: relative; height: 990px; width: 1750px">
    <div class="middle-top">
      <div class="middle-box" v-for="item in topData" :key="item.title">
        <div class="middle-top-1">{{ item.title }}</div>
        <div class="middle-top-2">
          {{ item.num }} <span class="danwei">{{ item.danwei }}</span>
        </div>
        <div class="middle-top-3">{{ item.mubiao }}</div>
        <div class="middle-top-4" v-if="item.propess">
          <el-progress v-if="item.propess!=100" :percentage="item.propess"  :stroke-width="4" color="#155FA0"  striped striped-flow  />
          <el-progress v-else :percentage="item.propess" status="success" :stroke-width="4" color="#238576" striped striped-flow :format="format" >
            <div text>
              <img src="../../static/middle/proessIcon.png" style="width: 17px; height: 11px;">
            </div>
           </el-progress> 

        </div>
      </div>
    </div>
    <!-- 中间部分 -->
    <lifeCycle @clild="clild" v-model:dataShow="isClosable"></lifeCycle>
    <!-- 底部 -->
    <div class="middle-bottom">
      <div class="middle-bottom-1">
        <div class="middle-bottom-content">
          <div>质安处XX表数据采集失败</div>
          <div>开发处XX字段一致性校验不通过</div>
          <div>设计处XX表质量检查不通过</div>
        </div>
      </div>
      <div class="middle-bottom-2">
        <div class="middle-bottom_2">
          <div class="middle-bottom_2_left">
            <div class="bt1">
              <div style="font-size: 12px; margin: 2px">处置完成</div>
              <div style="font-size: 10px">耗时43小时</div>
            </div>
            <div class="bt2">
              <div style="font-size: 12px; margin: 2px">处置中</div>
              <div style="font-size: 10px">历时34分钟</div>
            </div>
          </div>
          <div class="middle-bottom_2_right">
            <div>质安处XX表数据采集失败是因为数据库密 码变更，已在系统中修改。</div>
            <div>开发处XX字段一致性校验不通过，因为与 源头系统有XX条数据不一致，正在整改...</div>
          </div>
        </div>
      </div>
      <div class="middle-bottom-3">
        <div class="middle-bottom-content">
          <div>XX处XX系统，近一个月无数据更新，运维应及时说明原因。</div>
          <div>XX站数据库密码修改，导致数据采集任务失败，未及时通知专班。后续应在数据资源管理系统同步修改...</div>
        </div>
      </div>
      <div class="middle-bottom-4">
        <div class="middle-bottom-content">
          <div>业务处室修改数据库账号密码流程总结</div>
          <div>数据一致性校验流程优化</div>
          <!-- <div>设计处XX表质量检查不通过</div>  -->
        </div>
      </div>
    </div>
    <!-- Ai -->
    <div class="Ai" @click="AiModalFunc">
      <img src="../../static/middle/Ai.png" style="width: 98px; height: 145px" />
    </div>
    <!-- 部门驾驶仓 -->
    <div class="combination">
      <div style="margin: 65px 0px 0px 65px">
        <div>任务总数：<span style="color: #37c9c9; font-weight: 700">12380</span></div>
        <div style="margin: 32px 0px">风险点总数：<span style="color: #37c9c9; font-weight: 700">3246</span></div>
        <div>事件总数：<span style="color: #37c9c9; font-weight: 700">8675</span></div>
      </div>
    </div>
    <!-- 数字孪生 -->
    <div class="Twin">
      <img src="../../static/middle/Twin.png" style="width: 220px; height: 60px" />
    </div>
    <!-- 地图展示 -->
    <div class="mapShow">
      <!-- <el-select
      v-model="value"
      placeholder="地图展示"
      size="large"
      style="width: 120px;height: 60px;"
    >
    <el-option>2</el-option> 
    </el-select> -->
      <div class="map-item" @click="mapClick">
        <div><img src="../../static/middle/map1.png" /></div>
        <div style="margin: 0 20px">地图展示</div>
        <div>
          <img src="../../static/middle/map2.png" v-show="!mapDataShow" />
          <img src="../../static/middle/map3.png" v-show="mapDataShow" />
        </div>
      </div>
    </div>
    <div class="map-show" v-if="mapDataShow">
      <div class="map-1" @click="mapClick">
        <div style="margin: 12px 0px 0px 12px; display: flex">
          <div><img src="../../static/middle/map1.png" /></div>
          <div style="margin: 0 20px">项目图层</div>
        </div>
      </div>
      <div class="map-1" @click="mapClick">
        <div style="margin: 12px 0px 0px 12px; display: flex">
          <div><img src="../../static/middle/map1.png" /></div>
          <div style="margin: 0 20px">企业图层</div>
        </div>
      </div>
      <div class="map-1" @click="mapClick">
        <div style="margin: 12px 0px 0px 12px; display: flex">
          <div><img src="../../static/middle/map1.png" /></div>
          <div style="margin: 0 20px">房屋图层</div>
        </div>
      </div>
      <div class="map-1" @click="mapClick">
        <div style="margin: 12px 0px 0px 12px; display: flex">
          <div><img src="../../static/middle/map1.png" /></div>
          <div style="margin: 0 20px">事件图层</div>
        </div>
      </div>
      <div class="map-1" @click="mapClick">
        <div style="margin: 12px 0px 0px 12px; display: flex">
          <div><img src="../../static/middle/map1.png" /></div>
          <div style="margin: 0 20px">风险点图层</div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="modalShow" v-if="modalShow">
      <DataCollectionTaskCard @closeModal="closeModal"></DataCollectionTaskCard>
    </div>
  </div>

  <!-- ai智能体弹窗 -->
  <div class="AiModal" v-if="AiModalShow">
    <div class="closeAiModal" @click="closeAiModalFunc"></div>
  </div>
</template>
<script setup>
import "./index.css";
import { onMounted, ref } from "vue";
import { useEcharts } from "../../hook/ useEcharts";
import lifeCycle from "./components/lifeCycle.vue";
import DataCollectionTaskCard from "../Modal/DataCollectionTaskCard.vue";

import {
  GETdataCatalogCount,
  GETdataCollectionRate,
  GETirsGjRate,
  GETdataTotalCount,
  GETbusinessIndicatorCount,
  GETinterfaceCallCount,
  GETdataWorkOrderRate,
} from "../../api/index";
// 使用自定义 Hook
const { chartRef, initChart, updateChart } = useEcharts();

const topData = ref([
  {
    title: "数据目录数",
    num: "230",
    danwei: "个",
    mubiao: "目标值：1200个",
    propess:10
  },
  {
    title: "数据采集率",
    num: "80",
    danwei: "%",
    mubiao: "目标值：100%",
    propess:20
  },
  {
    title: "IRS编目归集率",
    num: "11",
    danwei: "%",
    mubiao: "目标值：100%",
    propess:50
  },
  {
    title: "数据共享率",
    num: "50",
    danwei: "%",
    mubiao: "目标值：80%",
    propess:90
  },
  {
    title: "数据总条数",
    num: "5",
    danwei: "亿条",
    mubiao: "月增长：1200万条",
   
  },
  {
    title: "业务指标数",
    num: "363",
    danwei: "个",
    mubiao: "月增长：20个",
   
  },
  {
    title: "接口调用总次数",
    num: "67.1",
    danwei: "万次",
    mubiao: "月增长：3万次",
   
  },
  {
    title: "数据工单处理及时率",
    num: "100",
    danwei: "%",
    mubiao: "目标值：100%",
    propess:100
  },
]);

const bottomData = ref();
const x = ref("0px");
const y = ref("0px");
const A = ref(0);
const B = ref(0);

const modalShow = ref(false);
const iconShow = ref(true);
const mapDataShow = ref(false);
const AiModalShow = ref(false);
const isClosable = ref(false);

const mapClick = () => {
  // mapDataShow.value = !mapDataShow.value
};

const clild = (e) => {
  modalShow.value = e;
};

const clickModel = (e) => {
  isClosable.value = false;
  if (A.value == e.offsetX && B.value == e.offsetY) {
    console.log(111);
    modalShow.value = false;
    // return
  } else {
    console.log(121, A.value);
    A.value = e.offsetX;
    B.value = e.offsetY;
    x.value = e.offsetX - 200 + "px";
    y.value = e.offsetY - 200 + "px";
    modalShow.value = false;
    //  if (20< e.offsetX-200&&e.offsetX-200<1200&&50<e.offsetY-200&&e.offsetY-200<500 ) {
    //   console.log('弹窗谈起');
    //   setTimeout(() => {
    //     modalShow.value = true
    //   }, 200)

    // }
  }

  console.log("坐标1", x.value, y.value);
};

const closeModal = () => {
  console.log("调用");
  modalShow.value = false;
  isClosable.value = false;
};

// ai弹窗
const AiModalFunc = () => {
  AiModalShow.value = true;
};

const closeAiModalFunc = () => {
  AiModalShow.value = false;
};

//数据请求
const gettopdata = () => {
  GETdataCatalogCount().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 230) {
        item.num = res.data.count || 230;
      }
      return item;
    });
  });
  GETdataCollectionRate().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 80) {
        item.num = res.data.value.substring(0, res.data.value.length - 1) || 80;
      }
      return item;
    });
  });
  // GETirsGjRate().then(res => { topData.value = topData.value.map(item => { if (item.num == 11) { item.num = res.data.value.substring(0, res.data.value.length - 1)||100 } return item }) })
  GETirsGjRate().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 11) {
        item.num = 100;
      }
      return item;
    });
  });
  GETdataTotalCount().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 5) {
        item.num = (res.data.count / 100000000).toFixed(2) || 5;
      }
      return item;
    });
  });
  GETbusinessIndicatorCount().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 363) {
        item.num = res.data.count || 363;
      }
      return item;
    });
  });
  GETinterfaceCallCount().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 365) {
        item.num = res.data.count || 365;
      }
      return item;
    });
  });
  GETdataWorkOrderRate().then((res) => {
    topData.value = topData.value.map((item) => {
      if (item.num == 100) {
        item.num = res.data.value.substring(0, res.data.value.length - 1) || 100;
      }
      return item;
    });
  });

  console.log("新数据", topData.value);
};



onMounted(() => {
  // document.addEventListener('click', clickModel)
  gettopdata();
});
</script>
<style scoped>
.modalShow {
  position: absolute;
  top: v-bind(y);
  left: v-bind(x);
  /* top: 200px; */
}


:deep .el-progress-bar__outer {
  background-color: #032039 !important;
  
}

:deep .el-progress__text{
    color: #CFEAFF;
}

</style>
